<template>
  <div class="QCommentBox">
    <div class="CommenterInfo">
      <div class="CommenterHeadPicture">
        <el-avatar :src="'//images.weserv.nl/?url=116.62.144.229:8080/HeadPortrait/'+comment.user_id" class="pic"/>
      </div>
      <div class="CommenterNameBox">
        <text class="CommenterName">{{comment.username}}</text>
      </div>
    </div>
    <div class="QCommentContentBox">
      <p class="QCommentContent">{{comment.comment_content}}</p>
    </div>
    <div class="QCommentFooter">
      <text class="QCommentTime">{{comment.create_time}}</text>
      <div class="QCOperationBox">
        <el-button :type="this.comment.liked?'info':'primary'" plain :icon="this.comment.liked?'StarFilled':'Star'" class="LikeQCBtn">{{this.comment.liked_count}}</el-button>
        <text class="CheckAnswerCommentBtn">
          <el-icon><ChatLineSquare /></el-icon>
          {{"回复"}}
        </text>
      </div>
    </div>
    <div class="QCommentReplyBox">
      <ReplyComment
          v-for="rc in comment.responses"
          :comment="rc"/>
    </div>
    <el-divider/>
  </div>
</template>

<script>
import {StarFilled,Star} from "@element-plus/icons-vue";
import ReplyComment from "@/components/common/ReplyComment.vue";
export default {
  name: "Comment",
  props: ["comment"],
  setup() {
    return {
      StarFilled,
      Star
    }
  },
  components: {
    ReplyComment
  },
  mounted() {
    console.log(this.comment)
  },
  data() {
    return {

    }
  }
}
</script>

<style scoped lang="less">
.QCommentBox {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  .CommenterInfo {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: left;
    .CommenterHeadPicture {
      width: 50px;
      height: 50px;
      .pic {
        width: 100%;
        height: 100%;
      }
    }
    .CommenterNameBox {
      height: 100%;
      width: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 10px;
      .CommenterName {
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .QCommentContentBox {
    width: 100%;
    height: auto;
    margin-top: 10px;
    .QCommentContent {
      width: 100%;
      height: fit-content;
      text-align: left;
      font-size: 18px;
      word-wrap: break-word;
    }
  }
  .QCommentFooter {
    margin-top: -10px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    .QCommentTime {
      margin-top: 2px;
    }
    .QCOperationBox {
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .LikeQCBtn {
        height: 20px;
        width: 40px;
        padding-top: 5px;
      }
      .CheckAnswerCommentBtn {
        cursor: pointer;
      }
    }
  }
}
</style>